<template>
	<view class="body">
		<view class="box">
			<view class="form formborder">
				<label>收货人</label>
				<input   type="text" v-model="receiver" placeholder="请输入收货人" />
			</view>
			<view class="form formborder">
				<label>手机号码</label>
				<input type="number" @blur="yzsjg" v-model="receiverPhone" placeholder="请输入收货人号码(座机加区号)" />
			</view>
			<view class="form1 formborder" @tap="handleTap('picker3')">
				<label>省市区</label>
				<view class="item-value" style="justify-content: space-between;width: 440rpx;">
					<text class="item-label" style="" v-if="label3!=''">{{ label3 }}</text>
					<text v-if="!label3" class="item-placeholder" style="">请选择收货省市</text>
					<!-- <image src="../../static/confirmOrder/go.png" v-if="!label3"></image> -->


					<lb-picker ref="picker3" :value="value3" mode="multiSelector" :list="list1" confirm-color="#FF690D"
						:level="3" :dataset="{ name: 'label3' }" @change="handleChange" @confirm="handleConfirm"
						@cancel="handleCancel">
					</lb-picker>
				</view>
			</view>
			<view class="form">
				<label>详细地址</label>
				<input type="text" v-model="address" placeholder="请输入详细地址" />
			</view>
		</view>

		<view class="footer">
			<button class="btn" @click="confirm"  :disabled="jyan"  :loading="jyan">确定</button>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import areaData from './area-data-min.js'
	import requestUrl from '../../js_sdk/request/requestUrl.js'
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				value3: [],
				label3: '',
				merchantId: '',
				receiver: '',
				receiverPhone: '',
				address: "",
				province: '',
				city: '',
				area: '',
				id: null,
				userInfo: {},
				oldAddress: {},
				list1: areaData,
				ydlist:[],
				marketObjct: {},
				ssjh:true,
				jyan:false

			}
		},
		components: {
			LbPicker,
			...mapState(['hasLogin', 'userInfo'])
		},
		// async onShow() {
		// 	if(uni.getStorageSync('userInfo')){
		// 		let id = uni.getStorageSync("userInfo").marketId
		// 		let res = await this.$request.get(this.$requestUrl.MARKET_LIST_URL, {
		// 			data: {
				
		// 			}
		// 		});
		// 		for (let i = 0; i < res.length; i++) {
		// 			this.marketObjct[res[i]['id']] = res[i]	
		// 		}
		// 		this.value3=[]
		// 		for (var i = 0; i < this.list1.length; i++) {
		// 			let province = this.list1[i]
		// 			if (province['label'] === this.marketObjct[id]['province']) {
		// 				this.value3.push(province['value'])
		// 				this.province=province['label']
		// 				for (var j = 0; j < province['children'].length; j++) {
		// 					let city = province['children'][j]
		// 					if (city.label === this.marketObjct[id]['city']) {
		// 						this.value3.push(city['value'])
		// 						this.city=city['label']
		// 						let qu=city['children'][0]['value']
		// 						this.area=city['children'][0]['label']
		// 						this.value3.push(qu)
		// 						this.label3=this.province+"\xa0"+this.city+"\xa0"+this.area
		// 						break
		// 					}
		// 				}
		// 				break;
		// 			}
		// 		}
		// 	}
		// },
		async onShow() {
			if (uni.getStorageSync('userInfo')) {
				let res = await this.$request.get(this.$requestUrl.MARKET_LIST_URL, {
					data: {
				
					}
				});
				
				
				let id = uni.getStorageSync("userInfo").marketId
				for (let i = 0; i < res.length; i++) {
					this.marketObjct[res[i]['id']] = res[i]
				
				}
					
				
				for (let i = 0; i < this.list1.length; i++) {
			
					let province = this.list1[i]
			
					if (province['label'] === this.marketObjct[id]['province']) {
								
						this.value3.push(province['value'])
						this.province = province['label']
						for (let j = 0; j < province['children'].length; j++) {
							let city = province['children'][j]
							if (city.label === this.marketObjct[id]['city']) {
								this.value3.push(city['value'])
								this.city = city['label']
								let qu = city['children'][0]['value']
								this.area = city['children'][0]['label']
								this.value3.push(qu)
								this.label3 = this.province + "\xa0" + this.city + "\xa0" + this.area
								break
							}
						}
						break;
					}
				}
			
			}
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.merchantId = this.userInfo.merchantId
			if (option["data"]) {
				this.oldAddress = JSON.parse(option.data)
				this.id = this.oldAddress.id
				this.receiver = this.oldAddress.receiver
				this.receiverPhone = this.oldAddress.receiverPhone
				this.address = this.oldAddress.address
				this.label3 = this.oldAddress.province + "\xa0" + this.oldAddress.city + "\xa0" + this.oldAddress.area
				for (var i = 0; i < this.list1.length; i++) {
					var province = this.list1[i]
					if (province['label'] === this.oldAddress.province) {
						
						this.value3.push(province['value'])
						for (var j = 0; j < province['children'].length; j++) {
							var city = province['children'][j]
							if (city.label === this.oldAddress.city) {
								this.value3.push(city['value'])
								
								for (var k = 0; k < city['children'].length; k++) {
									var area = city['children'][k]
									if (area.label === this.oldAddress.area) {
										this.value3.push(area['value'])
										
										
										
										break;
									}
								}
								break
							}
						}
						break;
					}
				}
				
				uni.setNavigationBarTitle({
					title: '修改收货地址'
				});
			}

		},
		methods: {
			async yzsjg(evt){
				let oldphone = evt.target.value
				let phonereg=11&&/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
				let  zjphonereg =/0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/
				
				
				if( phonereg.test(oldphone)|| zjphonereg.test(oldphone)){
						this.ssjh=true
				}else{
					this.ssjh=false
					return this.$api.msg('请填写正确的号码')
					
				}
				if (oldphone !== '' && uni.getStorageSync('token')) {
					await this.hdshr()
					for (let i = 0; i < this.ydlist.length; i++) {
						if (this.ydlist[i]['receiverPhone'] == oldphone) {
							return this.$api.msg('客户信息已存在，请点击地址簿选择')
						}
					}
				}
			},
			async hdshr() {
				let ress = await this.$request.get(this.$requestUrl.GET_ADRESS_URL, {
					data: {
						type: 2,
						isTms:0
					}
				});
				if (ress.length > 0) {
					this.ydlist = ress
				}
				this.$api.msg(ress || '系统繁忙，请稍后重试')
			},
			handleTap(picker) {
				this.$refs[picker].show()
				
			},
			handleChange(e) {
				
				if (e.change === 'init') {
				    
					
				}
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				
				if (e) {
					const name = e.dataset.name
					const label = e.item.map(m => m.label).join('\xa0')
					if (name && label) {
						this[name] = label
					}
					let site = label.split("\xa0")
					this.province = site[0]
					this.city = site[1]
					this.area = site[2]
				}
			},
			handleCancel(e) {
				
			},
			async confirm() {
				const num = /^1[3-9]\d{9}$/.test(this.receiverPhone)
				if (this.receiver == "") {
					uni.showToast({
						title: '请填写收货人',
						icon: "none",
						duration: 2000
					});
				} else if (this.receiverPhone == "") {
					uni.showToast({
						title: '请填写收货人手机号码',
						icon: "none",
						duration: 2000
					});
				} else if (!this.ssjh) {
					uni.showToast({
						title: '请填写正确格式的收货人手机号码',
						icon: "none",
						duration: 2000
					});
				} else if (this.label3 == "") {
					uni.showToast({
						title: '请选择收货地址',
						icon: "none",
						duration: 2000
					});
				} else if (this.address == "") {
					uni.showToast({
						title: '请填写详细地址',
						icon: "none",
						duration: 2000
					});
				} else {
					if (this.id == null) { 
						
						for (let i = 0; i < this.ydlist.length; i++) {
							if (this.ydlist[i]['address'] == this.address && this.ydlist[i]['receiver'] == this.receiver &&
								this.ydlist[i]['receiverPhone'] == this.receiverPhone && this.ydlist[i]['area'] == this.area) {
								 this.$api.msg('客户信息已存在，请在地址簿页面选择')
								return	uni.navigateBack({
									delta: 1
								})
							}
								
							
						}
						
						this.jyan=true
						
						try{
							var resz = await this.$request.post(requestUrl.NEW_ADDRESS, {
									data: {
										type: 2,
										receiver: this.receiver,
										receiverPhone: this.receiverPhone,
										province: this.province,
										city: this.city,
										area: this.area,
										address: this.address,
										merchantId: this.merchantId
										
									},
									
									
								}); //调取API接口
								
						}catch(e){
							this.$api.msg('网络错误，请重试')
							return this.jyan=false
						}
						
						if(resz){
							return	uni.navigateBack({
									delta: 1
								})
						}else{
							return this.jyan=false
						}
						
					} else {
						try{
							var resz = await this.$request.put(requestUrl.EDIT_ADRESS_URL, {
								data: {
									id: this.id,
									type: 2,
									receiver: this.receiver,
									receiverPhone: this.receiverPhone,
									province: this.province,
									city: this.city,
									area: this.area,
									address: this.address,
									merchantId: this.merchantId
							
								}
							}); //调取API接口
						}catch(e){
							this.$api.msg('网络错误，请重试')
							return this.jyan=false
						}
						
						if(resz){
							
							uni.navigateBack({
								delta: 1
							})
						}else{
							this.$api.msg('系统繁忙，请重试')
							return this.jyan=false
						}
						
						
					}

				}

			}
		}
	}
</script>

<style>
	.box {
		width: 702rpx;
		/* height: 199px; */
		margin: 0 auto;
		margin-top: 24rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
	}

	.form {
		width: 654rpx;
		/* line-height: 46px; */
		margin: 0 auto;
		justify-content: space-between;
		display: flex;
	}

	.form1 {
		width: 654rpx;
		/* line-height: 46px; */
		margin: 0 auto;
		justify-content: space-between;
		display: flex;
	}


	.form label {
		font-size: 28rpx;
		width: 120rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 92rpx;
		padding-right: 100rpx;
		color: #181818;
	}

	.form1 label {
		font-size: 28rpx;
		width: 120rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 92rpx;
		color: #181818;
		padding-right: 46rpx;
	}

	.form input {
		width: 460rpx;
		margin-top: 20rpx;
	}

	.formborder {
		border-bottom: 2rpx solid #EEEEEE;
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #FF690D;
		border-radius: 40rpx;
		color: #FFFFFF;

	}

	.footer {
		background-color: #FFFFFF;
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
	}

	.item-value {
		color: #777;
		display: flex;
		align-items: center;
	}

	image {
		width: 20rpx;
		height: 30rpx;
		margin-left: 50rpx;
		text-align: right;
		display: block;
	}

	.item-label {
		color: #000;
	}
</style>
